<template>
  <div class="head">
    <!-- <el-dropdown>
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click="login" v-if="!user">登录</el-dropdown-item>
        <el-dropdown-item @click="out" v-else>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
    <div style="margin:auto">
      <el-button class="head-button" size="mini"  v-if="!user" @click="login">登 录</el-button>
      <el-button class="head-button" size="mini"  v-if="user" @click="outlog">退 出</el-button>
      <el-button class="head-button" size="mini" @click="console">控制台</el-button>
      <span v-if="user">{{user.userName}}</span>
      <span v-else>请登录</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
    };
  },
  methods: {
    login() {
      this.$router.push({ name: "AuthorLogin", params: { data: this.data } });
      // const { href } = this.$router.resolve({
      //   name: "AuthorLogin",
      //   query: {},
      // });
      // window.open(href, "_blank");
    },
    outlog(){
      this.$router.push({ name: "AuthorLogin", params: { data: this.data } });
      // const { href } = this.$router.resolve({
      //   name: "AuthorLogin",
      //   query: {},
      // });
      // window.open(href, "_blank");
    },
    console() {
      this.$router.push({ path: "/index/Console" });
    },
  },
  created() {
    var user = this.$cookies.get("user");
    // var user = JSON.parse(localStorage.user);
    this.user = user;
  },
};
</script>

<style>
.head-button {
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
}
.head {
  height: 30px;
  background-color: rgb(255, 255, 255);
  font-size: 18px;
  padding: 10px;
  box-shadow: 0px 2px 10px #e4e3e3;
  text-align: right;
}
</style>